<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-address">
      <form action="">

        <div class="ga-input-group border">
          <label class="label">收货人</label>
          <div class="input-group">
            <input type="text" placeholder="收货人姓名" v-model="detail.name">
          </div>
        </div>

        <div class="ga-input-group border">
          <label class="label">收货人手机</label>
          <div class="input-group">
            <input type="tel" placeholder="手机号码" v-model="detail.mobile">
          </div>
        </div>

        <div class="ga-input-group border">
          <label class="label">地区</label>
          <div class="input-group">
            <input type="text" placeholder="选择地区" v-model="detail.address_tostring" disabled="disabled" @click="showmap">
          </div>
          <i class="gaIcon icon-angle-right"></i>
        </div>
          <!-- <div class="mpvue-picer">
            <button @click="showmap">选择地区</button>
          </div> -->

        <div class="ga-input-group border">
          <label class="label">详细地址</label>
          <div class="input-group">
            <input type="tel" placeholder="请输入详细地址" v-model="detail.address">
          </div>
        </div>

<!--         <div class="ga-input-group border">
          <label class="label">门牌</label>
          <div class="input-group">
            <input type="tel" placeholder="例：71号501号" v-model="detail.doorNo">
          </div>
        </div> -->

        <div class="ga-input-group border">
          <label class="label">是否默认</label>

          <radio-group  class="radio-box" @change="radioChange">
            <label class=" weui-check__label" v-for="(item,index) in radioItems" :key="index">
              <radio class="weui-check" :value="item.value" :checked="item.checked" />

              <div class="weui-cell__hd weui-check__hd_in-checkbox">
                <icon class="weui-icon-checkbox_circle" type="circle" size="23" v-if="!item.checked"></icon>
                <icon class="weui-icon-checkbox_success" type="success" size="23" v-if="item.checked"></icon>
              </div>

              <div class="weui-cell__bd">
                <p>{{item.name}}</p>
              </div>
            </label>
          </radio-group>
        </div>


        <div class="btn-box">
          <!--两种状态：
              gray disable 灰色禁止点击
              orange 橘色可以点击
          -->
          <button class="btn" :class="{'orange':isCompleted, 'disable': !isCompleted, 'gray': !isCompleted }" @click="handleSubmit">保存并使用</button>
          <button class="btn white" @click="handleDel" v-if="detail.id">删除地址</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import {isLogin} from '@/utils/handleLogin'
export default {
  data () {
    return {
      default: {},
      detail: {
        id: 0,
        name: '',
        mobile: '',
        province: '',
        city: '',
        district: '',
        address: '',
        is_default: 0,
        address_tostring: ''
      },
      isSetad: true,
      radioItems: [
        {name: '否', value: '0', checked: 1},
        {name: '是', value: '1', checked: 0}
      ],
      delItems: ['删除地址'],

      pickerValueDefault: [0, 0, 0],
      deepLength: 3,
      mode: 'multiLinkageSelector',
      mapdetail: [
         
      ]

    }
  },
  computed: {
    // 数据是否完成
    isCompleted () {
      // 这里写校验规则，如果表单数据合法，则返回true，否则返回false
      if(this.detail.name == ''){
        return false
      }
      if(this.detail.mobile == ''){
        return false
      }
      if(!this.isPoneAvailable(this.detail.mobile)){
        return false
      }
      if(this.detail.address == ''){
        return false
      }
      if(this.detail.district == ''){
        return false
      }
      if(this.isSetad == false){
        return false
      }
      // 先默认为true
      return true
    }

  },
  created () {
    
  },

  methods: {
     isPoneAvailable(str) {
          var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
          if (!myreg.test(str)) {
              return false;
          } else {
              return true;
          }
      },
    showmap () {
      let that = this
      // 地图选择
      wx.chooseLocation({
        success: function (res) {
          // success
          that.coord2address(res.latitude,res.longitude)
        },
        fail: function () {
        // fail
        },
        complete: function () {
        // complete
        }
      })
    },
    async coord2address (latitude,longitude) {
      let params ={
           latitude: latitude,
           longitude: longitude
      }

       this.$_util.ajax.post('https://guo-a.com/mapi/api/coord2address',params).then((res)=>{
         console.log(res)
         if(res.code === 200){
            this.detail.address_tostring = res.data.address_string
            this.detail.address = res.data.address_detail
            this.detail.district = res.data.adcode
            this.isSetad = true
         }else{
            this.detail.address_tostring = '选择的地址不正确'
            this.isSetad = false
         }
       })
    },
    /**
     * 单选框change
     * **/
    radioChange (e) {
      this.detail.is_default = e.target.value
      this.radioItems.forEach(item => {
        item.checked = item.value === e.mp.detail.value
      })
    },
    /**
     * 删除地址
     * **/
    handleDel () {
      let _this = this
      wx.showActionSheet({
        itemList: _this.delItems,
        success: function (res) {
          _this.doDel()
        }
      })
    },
    /*删除地址*/
    async doDel () {
      let params = {
         id: this.detail.id
      }
      this.$_util.ajax.post('https://guo-a.com/mapi/address/del?token=' + this.$store.state.Token,params).then((res) => {
          if (res.code === 200) {
            this.$_util.successToast('删除成功', () => {
              wx.navigateBack()
            })
          }
      })
    },

     /**
     * 提交数据
     * **/
    async handleSubmit () {
      this.$_util.ajax.post('https://guo-a.com/mapi/address/edit?token=' + this.$store.state.Token,this.detail).then((res)=>{
         if(res.code === 200){
            this.$_util.successToast('操作成功', () => {
              wx.navigateBack()
            })
         }
      })
    },
    async load () {
      /*如果带参数*/
      if (this.$root.$mp.query.hasOwnProperty('id')) {
          this.$_util.ajax.post('https://guo-a.com/mapi/address/detail?token=' + this.$store.state.Token,{id:this.$root.$mp.query.id}).then((res)=>{
            if(res.code === 200){
                this.detail = res.data
                this.radioItems.forEach(item => {
                  item.checked = item.value === res.data.is_default
                })
            }
          })
      }
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url
        })
    },
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    }
  },
  mounted () {
    this.detail.name=''
    this.detail.mobile=''
    this.detail.is_default=0
    this.detail.address_tostring=''
    this.radioItems = [
      {name: '否', value: '0', checked: 1},
      {name: '是', value: '1', checked: 0}
    ]
    this.load()
  },
  onShow () {
    isLogin()
  }
}
</script>
